<template>
  <div class="contain">
    <input type="checkbox" v-model="isDone">
    <del v-if="isDone">
        {{item.title}}
    </del>
       <span v-if="!isDone">
        {{item.title}}
    </span>

  </div>
</template>

<script>
import eventBus from '@/js/eventBus';

export default {
    name :'TodoItem',
    data() {
        return {
          isDone: this.item.done  
        }
    },
    props:['item','index'],
    watch:{
      isDone(val){
        eventBus.$emit(eventBus.changeItemStatus,this.index,val)
      }
    },
    mounted(){
   eventBus.$on(eventBus.changeAllItemStatus,(val)=>{
        this.isDone=val
      })
    }
   
}
</script>

<style scoped>
.contain {
    border: 1px solid blue;
}
</style>